Ext.define('Seq.svg.Viewer', {
	        extend : 'Ext.panel.Panel',
	        alias : 'widget.svgviewer',

	        mixins : {
		        base : 'Seq.svg.Base'
	        },

	        config : {
		        values : null,
		        url : null,
		        zoom : 1
	        },

	        header : false,

	        setData : function(value) {
		        var me = this;
		        if (value) {
			        var dom = Ext.fly(me.getId() + '-innerCt');
			        me.loaded = false;
			        dom.setHtml();
			        var fragment = Snap.parse(value);
			        dom.appendChild(fragment.node);
			        me.afterLoad();
			        me.loaded = true;
		        }
	        },

	        updateUrl : function(value) {
		        var me = this;
		        if (value) {
			        me.loaded = false;
			        Snap.load(value, function(svg) {
				                this.appendChild(svg.node); // must use this
				                me.afterLoad();
				                me.loaded = true;
			                }, Ext.fly(me.getId() + '-innerCt'));
		        }
	        },

	        setValue : function(model, value) {
		        if ('text' == model.type) {
			        model.node.textContent = Ext.util.Format.number(value, model.attr('format') || '0.##');
		        } else {
			        var symbol = this.svg.select(model.attr('xlink:href')), states = symbol.attr('states');
			        if (states) {
				        states = Ext.decode(states);
				        var href = states['v_' + value];
				        if (href) {
					        model.attr('xlink:href', href);
				        }
			        }
		        }
		        model.attr('value', value);
	        },

	        selectByKey : function(key) {
		        var query = Ext.String.format('[device="{0}"]', key.id), models = this.svg.selectAll(query);
		        for (var i = 0, len = models.length; i < len; i++) {
			        var model = models[i];
			        if (key.metric === model.attr('metric')) {
				        return model;
			        }
		        }
	        },

	        setValues : function(values) {
		        var me = this;
		        for (var i = 0, len = values.length; i < len; i++) {
			        var value = values[i], model = selectByKey(value.key);
			        if (model) {
				        me.setValue(model, value.value);
			        }
		        }
	        },

	        afterLoad : function() {
		        var me = this;
		        me.svg = Snap('svg');
		        me.resize();
		        me.initModels();
	        },

	        zoomIn : function() {
		        var me = this, zoom = me.zoom;
		        if (zoom >= 1 && zoom < 3) {
			        zoom += 0.5;
		        } else if (zoom >= 0.25 && zoom < 1) {
			        zoom += 0.25;
		        }
		        me.zoom = zoom;
		        me.resize();
		        return zoom;
	        },

	        zoomOut : function() {
		        var me = this, zoom = me.zoom;
		        if (zoom > 1 && zoom <= 3) {
			        zoom -= 0.5;
		        } else if (zoom > 0.25 && zoom <= 1) {
			        zoom -= 0.25;
		        }
		        me.zoom = zoom;
		        me.resize();
		        return zoom;
	        },

	        resize : function() {
		        var me = this;
		        var viewBox = me.svg.node.viewBox.animVal, ownerBox = me.ownerCt.getBox();

		        var width = viewBox.width * me.zoom, height = viewBox.height * me.zoom;
		        width = width < ownerBox.width ? ownerBox.width : width;
		        height = height < ownerBox.height ? ownerBox.height : height;

		        me.ownerCt.suspendLayouts();
		        try {
			        me.svg.node.attributes.width.nodeValue = width;
			        me.svg.node.attributes.height.nodeValue = height;
			        me.setWidth(width);
			        me.setHeight(height);
		        } finally {
			        me.ownerCt.resumeLayouts(true);
		        }
	        },

	        afterRender : function() {
		        var me = this;
		        me.callParent();

		        el = me.getEl();
		        el.on('dblclick', me.onDblClick, me);
		        el.on('mousedown', me.onMouseDown, me);
		        el.on('mousemove', me.onMouseMove, me);
		        el.on('mouseup', me.onMouseUp, me);
	        },

	        initModels : function() {
		        var me = this, children = me.svg.children();

		        me.models = [];
		        for (var i = 0, len = children.length; i < len; i++) {
			        var model = children[i];
			        switch (model.type) {
			        case '#text' :
			        case 'desc' :
			        case 'defs' :
				        continue;
			        default :
//				        model.attr({
//					                fill : '#000000',
//					                'fill-opacity' : 0
//				                })
				        model.hover(me.onModelHoverIn, me.onModelHoverOut);
				        me.models.push(model);
			        }
		        }
	        },

	        onDblClick : function(e, t) {
	        },

	        onMouseDown : function(e, t) {
		        if (0 == e.button) {
			        var me = this, model = me.getModel(e, t);
			        if ('DIV' != model.type) {
				        me.fireEvent('mousedown', model, me);
				        return model;
			        }
		        }
	        },

	        onMouseMove : function(e, t) {
	        },

	        onMouseUp : function(e, t) {
	        },

	        onModelHoverIn : function() {
		        this.attr({
			                cursor : 'hand'
		                });
	        },

	        onModelHoverOut : function() {
		        this.attr({
			                cursor : 'default'
		                });
	        }

        });
